<script setup>
import { MessRecordlistPage } from '@/assets/api/api'
import { ref, reactive, toRefs } from 'vue'
const props = defineProps({
    noticeData: {
        type: Object,
        default() {
            return {}
        },
    },
})
const messageList = ref([])
const currentPage = ref(1)
const pageSize = 10
const total = ref(0)
const { noticeData } = toRefs(props)
const filterForm = reactive({
    page: currentPage,
    limit: pageSize,
    phone: noticeData.value.phone,
    type: noticeData.value.type,
})
const getData = () => {
    MessRecordlistPage({ ...filterForm }).then((res) => {
        messageList.value = res.data.Items
        total.value = res.data.totalSize
    })
}
getData()
const handleCurrentChange = (e) => {
    currentPage.value = e
    getData()
}
// const searchData = () => {
//     getData()
// }
// const ruleFormRef = ref()
// const resetForm = (formEl) => {
//     if (!formEl) return
//     formEl.resetFields()
// }
// const typeList = reactive({
//     type: [
//         { value: 1, name: '短信' },
//         { value: 2, name: '语音' },
//     ],
// })
// onUnmounted(() => {
//     console.log('App ===> 相当于 vue2.x 中 destroyed')
// })
</script>

<template>
    <div>
        <!-- <el-form
            :model="filterForm"
            :inline="true"
            class="dflex white-box"
            ref="ruleFormRef"
        > -->
        <!-- <el-row :gutter="20" class="flex-1 search">
                <el-form-item prop="phone" label="手机号">
                    <el-input
                        v-model="filterForm.phone"
                        style="width: 200px"
                        placeholder="请输入手机号码"
                    />
                </el-form-item>
                <el-form-item prop="type" label="通讯方式">
                    <el-select
                        v-model="filterForm.type"
                        placeholder="请选择通讯方式"
                    >
                        <el-option
                            v-for="(item, key) in typeList.type"
                            :label="item.name"
                            :value="item.value"
                            :key="key"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-row> -->
        <!-- <el-row :gutter="20">
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                <el-button type="primary" @click="searchData">搜索</el-button>
            </el-row> -->
        <!-- </el-form> -->
        <el-table :data="messageList" style="width: 100%">
            <el-table-column prop="number" label="设备编号" />
            <el-table-column prop="phone" label="手机号码" />
            <el-table-column prop="time" label="时间" />
            <el-table-column label="通知方式">
                <template #default="scope">
                    {{ scope.row.type == 1 ? '短信' : '语音' }}
                </template>
            </el-table-column>
        </el-table>
        <div class="fl-bw">
            <div></div>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total"
            />
        </div>
    </div>
</template>

<style lang="scss" scoped>
:deep().el-table .el-table__cell {
    padding: 20px 0 !important;
}
</style>
